<template>
  <div class="hm-index">
    <!-- <div class="navs">
      <router-link to="/index/article">面经</router-link>
      <router-link to="/index/collect">收藏</router-link>
      <router-link to="/index/like">喜欢</router-link>
      <router-link to="/index/user">我的</router-link>
    </div> -->
    <van-tabbar v-model="active" active-color="orange">
      <van-tabbar-item icon="orders-o" to="/index/article"
        >面经</van-tabbar-item
      >
      <van-tabbar-item icon="star-o" to="/index/collect">收藏</van-tabbar-item>
      <van-tabbar-item icon="like-o" to="/index/like">喜欢</van-tabbar-item>
      <van-tabbar-item icon="contact-o" to="/index/user">我的</van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
// import router from "@/router";
export default {
  name: "HmIndex",
  //   router,
  activated() {
    this.checkIndex();
  },
  deactivated() {
    console.log("离开了");
  },
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    checkIndex() {
      const path = this.$route.path;
      //根据path判断当前tab是否与path相符合
      if (path.includes("article")) {
        this.active = 0;
      } else if (path.includes("collect")) {
        this.active = 1;
      } else if (path.includes("like")) {
        this.active = 2;
      } else if (path.includes("user")) {
        this.active = 3;
      }
    },
  },
  watch: {
    $route() {
      this.checkIndex();
    },
    immediate: true,
  },
};
</script>

<style lang="less" scoped>
.hm-index {
  width: 100%;
  height: 100%;
  position: relative;
  //   background: #f5f5f5;
  padding-bottom: 50px;
}

// .navs {
//   width: 100%;
//   height: 50px;
//   display: flex;
//   justify-content: space-evenly;
//   align-items: center;
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   background-color: #fff;
//   box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);

//   a {
//     color: #333;
//     text-decoration: none;
//     font-size: 14px;
//   }

//   .router-link-active {
//     color: #1890ff;
//   }
// }
</style>
